<template>
    <main style="width: 100%;height: 308px; background-color: rgba(255, 255, 203, 0.5); ">
        <div style="width: 100%; height: 265px; display: flex; justify-content: center; align-items: center;">
            <el-form label-position="left" label-width="auto" style="width: 80%;  transform: translateY(22px);"
                ref="ruleFormRef" :model="opruleForm" :rules="loginRules">
                <el-form-item>
                    <div class="logo">
                        <img src="../../../assets/img/logo.jpg">
                    </div>
                </el-form-item>
                <el-form-item>
                    <span style="font-size: 20px;">{{ title }}</span>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input v-model="opruleForm.username" clearable placeholder="账号" :prefix-icon="UserFilled" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="opruleForm.password" clearable show-password placeholder="密码"
                        :prefix-icon="UserFilled" />
                </el-form-item>

                <el-form-item>
                    <el-button class="mt-4" size="default" style="width: 80px;" type="primary" @click="logins"
                        :loading="loading">{{
                            buttmis }}</el-button>
                    <el-button @click="enroll" class="mt-4" style="width: 163px;" type="danger" plain
                        :loading="loading">{{ logmis
                        }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </main>
</template>

<script lang="ts" setup>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue"
import { UserFilled } from '@element-plus/icons-vue'
import type { FormInstance } from "element-plus";
import { loginRules } from "@/utils/validrule";
import { setUserInfo } from "@/utils/userinfolsage";
import { loginUser } from "@/api/reqapi"
const router = useRouter();
const title = ref("奕几 - 用户登陆");
const loading = ref(false);
const opruleForm = reactive({
    username: "",
    password: ""
});
const loginload = ref(true);
const ruleFormRef = ref<FormInstance>();
const buttmis = ref("登陆")
const logmis = ref("没有账号，前往注册")
const enroll = () => {
    if (loginload.value) {
        loginload.value = false;
        buttmis.value = "注册";
        logmis.value = "已有账号，前往登陆"
    } else {
        loginload.value = true;
        buttmis.value = "登陆";
        logmis.value = "没有账号，前往注册"
    }
}
const logins = async () => {
    try {
    loginUser(opruleForm).then((res_rep_data: any) => {
        if (res_rep_data != null && res_rep_data.code == "1000") {
            console.log("asdasssad");
            setUserInfo(res_rep_data.content);
            router.push("/home");
        }
      });
  } catch (error) {
    loading.value = false;
  }
};

// = () => {
//     loading.value = true;
//     if (opruleForm.username == "123456" && opruleForm.password == "123456") {
//         router.push("/home");
//         loading.value = false;
//     }
// }
</script>
<style lang="css" scoped>
.logo {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    /* transform: translateY(32px); */
    border-radius: 50%;
    background-color: antiquewhite;
    box-shadow: 2px 2px 10px 2px rgb(54, 14, 74);
}

.logo img {
    width: 100%;
}
</style>
